<template>
    <div >    
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>诉讼处理记录</span>
                <span></span>
            </div>
            <el-descriptions title="">    
                <el-descriptions-item label="诉讼状态">
                    <span v-if="value.handleList.proceedStatus==4">
                        诉讼中
                    </span>
                    <span v-else-if="value.handleList.proceedStatus==5">
                        诉讼完成
                    </span>
                    <span v-else>
                        --
                    </span>
                </el-descriptions-item>
                <el-descriptions-item label="完成时间">
                    {{ value.handleList.completeTime|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="说明">
                    {{ value.handleList.completeExplain|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="附件">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.handleList.file" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>和解方案</span>
                <span></span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  name="1">
                    <el-table fit :data="definitionList" border v-if="tableCloumns.length > 0">
                        <TableCloumn v-for="item in tableCloumns" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                label="收款凭证"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.file" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>和解结果</span>
                <span></span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  name="1">
                    <el-table fit :data="definitionList1" border v-if="tableCloumns1.length > 0">
                        <TableCloumn v-for="item in tableCloumns1" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                label="和解协议"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.file" />
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="附件"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.url" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>调解方案</span>
                <span></span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  name="1">
                    <el-table fit :data="definitionList2" border v-if="tableCloumns2.length > 0">
                        <TableCloumn v-for="item in tableCloumns2" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                label="附件"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.url" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>调解结果</span>
                <span></span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  name="1">
                    <el-table fit :data="definitionList3" border v-if="tableCloumns3.length > 0">
                        <TableCloumn v-for="item in tableCloumns3" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                label="调解书"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.file" />
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="附件"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.url" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>判决结果</span>
                <span></span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  name="1">
                    <el-table fit :data="definitionList4" border v-if="tableCloumns4.length > 0">
                        <TableCloumn v-for="item in tableCloumns4" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                label="判决书"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.url" />
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="附件"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.file" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>强制执行结果</span>
                <span></span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item  name="1">
                    <el-table fit :data="definitionList5" border v-if="tableCloumns5.length > 0">
                        <TableCloumn v-for="item in tableCloumns5" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                label="强制执行立案通知书"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.url" />
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="附件"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <Image-common disabled v-model="scope.row.file" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
    </div>
</template>

<script>

import Tabs from "@/components/Tabs/index.vue"
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";

export default {
    name: "Application",
    components: {Tabs,TableCloumn},
    dicts: [ 'progress_litigation'],
    props:{
        value: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return { 
            activeNames: ['1'],
            // 流程定义表格数据
            titleList:[],
            typeList:[],
            tableCloumns: [ ],
            tableCloumns1: [ ],
            tableCloumns2: [ ],
            tableCloumns3: [ ],
            tableCloumns4: [ ],
            tableCloumns5: [ ],
            definitionList:[],
            definitionList1:[],
            definitionList2:[],
            definitionList3:[],
            definitionList4:[],
            definitionList5:[],
        };
    },
    async created(){
        this.typeList = await this._getDicts("progress_litigation");
        this.tableCloumns = [
            {
                    label: "说明",
                    prop: "explainText",
                },
                {
                    label: "提交人",
                    prop: "createBy",
                },
                {
                    label: "提交时间",
                    prop: "createTime",
                },        
        ]
        this.tableCloumns1 = [
        {
                    label: "收款方户名",
                    prop: "lessorName",

                },
                {
                    label: "收款方开户行",
                    prop: "lessorBank",
                },
                {
                    label: "收款方账号",
                    prop: "lessorAccount",
                },
                {
                    label: "付款方户名",
                    prop: "lesseeName",
                },
                {
                    label: "付款方开户行",
                    prop: "lesseeBank",
                },
                {
                    label: "付款方账号",
                    prop: "lesseeAccount",
                },
                {
                    label: "和解金额",
                    prop: "amount",
                    format: (row) => {
                        return format_thousand(row.amount);
                    },
                },
                {
                    label: "付款时间",
                    prop: "endPayTime",
                },
                {
                    label: "说明",
                    prop: "explainText",
                },
                {
                    label: "提交人",
                    prop: "createBy",
                },
                {
                    label: "提交时间",
                    prop: "createTime",
                },
        ]
        this.tableCloumns2 = [
                {
                    label: "说明",
                    prop: "explainText",
                },
                {
                    label: "提交人",
                    prop: "createBy",
                },
                {
                    label: "提交时间",
                    prop: "createTime",
                },
                
        ]
        this.tableCloumns3 = [
        {
                    label: "收款方户名",
                    prop: "lessorName",

                },
                {
                    label: "收款方开户行",
                    prop: "lessorBank",
                },
                {
                    label: "收款方账号",
                    prop: "lessorAccount",
                },
                {
                    label: "付款方户名",
                    prop: "lesseeName",
                },
                {
                    label: "付款方开户行",
                    prop: "lesseeBank",
                },
                {
                    label: "付款方账号",
                    prop: "lesseeAccount",
                },
                {
                    label: "调解金额",
                    prop: "amount",
                    format: (row) => {
                        return format_thousand(row.amount);
                    },
                },
                {
                    label: "付款时间",
                    prop: "endPayTime",
                },
                {
                    label: "说明",
                    prop: "explainText",
                },
                {
                    label: "提交人",
                    prop: "createBy",
                },
                {
                    label: "提交时间",
                    prop: "createTime",
                },
        
        ]
        this.tableCloumns4 = [
        {
                    label: "收款方户名",
                    prop: "lessorName",

                },
                {
                    label: "收款方开户行",
                    prop: "lessorBank",
                },
                {
                    label: "收款方账号",
                    prop: "lessorAccount",
                },
                {
                    label: "付款方户名",
                    prop: "lesseeName",
                },
                {
                    label: "付款方开户行",
                    prop: "lesseeBank",
                },
                {
                    label: "付款方账号",
                    prop: "lesseeAccount",
                },
                {
                    label: "判决金额",
                    prop: "amount",
                    format: (row) => {
                        return format_thousand(row.amount);
                    },
                },
                {
                    label: "付款时间",
                    prop: "endPayTime",
                },
                {
                    label: "说明",
                    prop: "explainText",
                },
                {
                    label: "提交人",
                    prop: "createBy",
                },
                {
                    label: "提交时间",
                    prop: "createTime",
                },
        
        ]
        this.tableCloumns5 = [
                {
                    label: "说明",
                    prop: "explainText",
                },
                {
                    label: "提交人",
                    prop: "createBy",
                },
                {
                    label: "提交时间",
                    prop: "createTime",
                },
                
        ]
    },
  
    watch:{  
        'value.handleList.handleGroupMap':{
            deep:true,
            handler(val){
                //0 和解方案 1 和解结果 2 调解方案 3 调解结果 4 判决结果 5 强制执行结果
                this.definitionList = val[0]
                this.definitionList1 = val[1]
                this.definitionList2 = val[2]
                this.definitionList3= val[3]
                this.definitionList4= val[4]
                this.definitionList5= val[5]
            },
            immediate:true
        },
       
        definitionList:{
            deep:true,
            handler(val){
                this.definitionList = val
            }
        },
        definitionList1:{
            deep:true,
            handler(val){
                this.definitionList1 = val
            }
        },
        definitionList2:{
            deep:true,
            handler(val){
                this.definitionList2 = val
            }
        },
        definitionList3:{
            deep:true,
            handler(val){
                this.definitionList3 = val
            }
        },
        definitionList4:{
            deep:true,
            handler(val){
                this.definitionList4 = val
            }
        },
        definitionList5:{
            deep:true,
            handler(val){
                this.definitionList5 = val
            }
        },
    },
    methods: {
        // 预览图片
        previewImage(urls) {
            this._previewImages(urls);
        },
        // 折叠面板
        handleChange(val) {
      }
      
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
